<template>
    <!-- 打断按钮 -->
    <div 
      v-if="props.buttonInterrupt&&showInterruptButton&&false"
      :style="'transform: translate('+props.buttonOptions.x+'px, '+props.buttonOptions.y+'px);width:'+props.buttonOptions.width+'px;height:'+props.buttonOptions.height+'px;z-index:'+props.buttonOptions.zindex+';'"
      class="center interrupt-button "
      @click="handleInterrupt"
    >
      <div class="unselectable"
        style="position: absolute;bottom: 0px;height: 100%;width:100%;color:#409eff;border:1px solid #409eff;border-radius: 20px;padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;display: flex;justify-content: center;align-items: center;">
        <i class="el-icon-video-pause" style="margin-right: 5px;"></i>
        停止回答
      </div>
    </div>
  
    <!-- 打断词提示 -->
    <div 
      v-if="showInterruptTip&&voiceInterruptWord&&voiceInterruptWord!=''&&false"
      :style="'transform: translate('+props.tipOptions.x+'px, '+props.tipOptions.y+'px);width:'+props.tipOptions.width+'px;height:'+props.tipOptions.height+'px;z-index:'+props.tipOptions.zindex+';'"
      class="center interrupt-tip "
    >
      <div class="tip-content">
        <span  >
          你可以说“{{ voiceInterruptWord }}”来打断
          <!-- <el-divider v-if="index !== voiceInterruptWords.length - 1" direction="vertical" /> -->
        </span>
      </div>
    </div>
  </template>
  
  <script setup>
  import { getCurrentInstance,onMounted,ref } from 'vue'
  import { mittTypes } from "@/util/types"
  
  const internalInstance = getCurrentInstance()
  const emitter = internalInstance.appContext.config.globalProperties.emitter
  
  const props = defineProps({
    buttonInterrupt: {
      type: Boolean,
      default: true
    },
    buttonOptions: {
      type: Object,
      default: () => ({
        x: 20,
        y: 20,
        width: 160,
        height: 60,
        zindex: 10
      })
    },
    tip: {
      type: Boolean,
      default: true
    },
    tipOptions: {
      type: Object,
      default: () => ({
        x: 80,
        y: 20,
        width: 200,
        height: 40,
        zindex: 10
      })
    },
    voiceInterruptWords: {
      type: Array,
      default: () => ['别说了', '我知道了']
    },
    interruptResponses: {
      type: Array,
      default: () => [
        { text: '好的，您还可以问我其他问题哦~', flowNode: null },
        { text: '好的，您还可以说一下其他感兴趣的话题问我哦~', flowNode: null }
      ]
    }
  })
  const showInterruptTip = ref(false)
  const showInterruptButton = ref(false)
  
  const voiceInterruptWord = ref("")

  // 处理打断按钮点击
  const handleInterrupt = () => {
    // 发送打断事件
    // emitter.emit(mittTypes.WEBHUMAN.STOP_VISEME_AUDIO)
    emitter.emit(mittTypes.CHATBOX.STOP_REPLY)
    
    // 随机选择一个打断回复
    if (props.interruptResponses && props.interruptResponses.length > 0) {
      const randomIndex = Math.floor(Math.random() * props.interruptResponses.length)
      const response = props.interruptResponses[randomIndex]
      
      // 如果有流程节点，触发流程节点
      if (response.flowNode) {
        emitter.emit(mittTypes.RENDERER.SET_FLOWNODE, response.flowNode)
      } else {
        // 否则直接发送文本回复
        emitter.emit(mittTypes.CHATBOX.SET_BOT_MESSAGE, response.text)
      }
    }
  }
  onMounted(() => {
    // 监听打断事件 打断按钮和打断提示同时出现
    emitter.on(mittTypes.RENDERER.SET_SHOW_INTERRUPT_TIP, (show) => {
      showInterruptTip.value = show
      // 新增：从数组中随机选择一个打断词
      if (props.voiceInterruptWords.length > 0) {
        const randomIndex = Math.floor(Math.random() * props.voiceInterruptWords.length)
        voiceInterruptWord.value = props.voiceInterruptWords[randomIndex]
      }
    })
    emitter.on(mittTypes.RENDERER.SET_SHOW_INTERRUPT_BUTTON, (show) => {
      showInterruptButton.value = show
    })
    if (props.voiceInterruptWords.length > 0) {
      const randomIndex = Math.floor(Math.random() * props.voiceInterruptWords.length)
      voiceInterruptWord.value = props.voiceInterruptWords[randomIndex]
    }
    
  })
  </script>
  
  <script>
  export default {
    name: 'Interrupt'
  }
  </script>
  
  <style scoped>
  .interrupt-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .interrupt-tip {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tip-content {
    color: #fff;
    font-size: 14px;
    padding: 0 15px;
    text-align: center;
    width: 100%;
  }
  
  .divider {
    margin: 0 5px;
    color: #909399;
  }
  
  .unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .center{
  background-position: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background-size: cover;
}
  </style>